<template>
  <el-date-picker
    align="right"
    v-bind="fld"
    :type="type"
    :format="format"
    :value-format="valueFormat"
    :value="value"
    @input="handleModelInput"
    @change="handleChange"
    :picker-options="pickerOptions"
    unlink-panels
    size="mini"
  ></el-date-picker>
</template>
<script type="text/javascript">
  define(['vue'],function(vue){
    return vue.component('comp-calendar',{
      template: template,
      data : function(){
        var date  = new Date();

        let pickerOptions = {
            shortcuts: [
            {
              text: '本月',
              onClick(picker) {
                var end   = new Date();
                var month = parseInt(date.getMonth())+1;
                var year  = parseInt(date.getFullYear());
                if(month < 10) month = "0" + month;
                var start_time = year + "-" + month + "-" + '01';
                start_time = new Date(start_time);

                picker.$emit('pick', [start_time, end]);
              }
            },
            {
              text: '上月',
              onClick(picker) {
                var month = parseInt(date.getMonth())+1;
                var year  = parseInt(date.getFullYear());
                if(month==1){
                  year = year - 1;
                  month = 12;
                  var last = new Date(year,12,0).getDate();
                  var start_time = year+"-"+month+"-"+'01';
                  var end_time = year+"-"+month+"-"+last;
                }else{
                  month = month - 1;
                  if(month < 10) month = "0" + month;
                  var last = new Date(year,month,0).getDate();
                  var start_time = year+"-"+month+"-"+'01';
                  var end_time = year+"-"+month+"-"+last;
                }

                // console.log(end_time,start_time);
                start_time = new Date(start_time);
                end_time = new Date(end_time);

                picker.$emit('pick', [start_time, end_time]);
              }
            },
            {
              text: '本年',
              onClick(picker) {
                const end = new Date();
                var year  = parseInt(date.getFullYear());
                var start_time = year+"-"+'01'+"-"+'01';
                start_time = new Date(start_time);

                picker.$emit('pick', [start_time, end]);
              }
            },
            {
              text: '去年',
              onClick(picker) {
                var year  = parseInt(date.getFullYear());
                year = year - 1;
                var start_time = year+"-"+'01'+"-"+'01';
                var end_time = year+"-"+'12'+"-"+'31';
                start_time = new Date(start_time);
                end_time = new Date(end_time);

                picker.$emit('pick', [start_time, end_time]);
              }
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 92);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近六个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 183);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '全部',
              onClick(picker) {
                const end = new Date();
                const start = new Date("2000-01-01");

                picker.$emit('pick', [start, end]);
              }
            }]
          };

        let _pickerOptions = this.fld.shortcutOptions ? pickerOptions : {};
        // console.log('_pickerOptions',_pickerOptions);

        return {
          'type':'date',
          'format':'yyyy-MM-dd',
          'valueFormat':'yyyy-MM-dd',
          'pickerOptions': _pickerOptions
        }
      },
      props:['fld','value'],
      methods:{
        handleModelInput :function(val){
          this.$emit("input", val);
        },
        handleChange : function(val) {
          var key = `${this.fld.name}:change`;
          if(!this.$root.callbacks[key]) return;
          this.$root.callbacks[key].apply(this,arguments);
        },
      },
      created : function() {
        //year/month/date/dates/ week/datetime/datetimerange/daterange
        var mapType = {
          'year':{'format':'yyyy','value-format':'yyyy'},
          'month':{'format':'yyyy-MM','value-format':'yyyy-MM'},
          'date':{'format':'yyyy-MM-dd','value-format':'yyyy-MM-dd'},
          'dates':{'format':'yyyy-MM-dd','value-format':'yyyy-MM-dd'},
          // 'week':{'format':'yyyy-MM-dd','value-format':'yyyy-MM-dd'},
          // 'datetime':{'format':'yyyy-MM-dd','value-format':'yyyy-MM-dd'},
          // 'datetimerange':{'format':'yyyy-MM-dd','value-format':'yyyy-MM-dd'},
          'datetime':{'format':'yyyy-MM-dd HH:mm:ss','value-format':'yyyy-MM-dd HH:mm:ss'},
          'daterange':{'format':'yyyy-MM-dd','value-format':'yyyy-MM-dd'},
        };
        //如果配置参数中定义了ctype(可能是日期范围),这里需要动态改变
        if(this.fld['ctype']) this.type=this.fld['ctype'];
        this.format = mapType[this.type]['format'];
        this.valueFormat = mapType[this.type]['value-format'];
      }
    });
  });
</script>